<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的购物车</title>
    <script src="/js/axios.min.js" type="text/javascript"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/RegistrationFilling.css">
    <style>
        ul li{
            list-style: none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .upperpage{
            margin-top: 20px;
        }
        .pagedisplay{
            background-color: white;
            width: 96%;
           
            margin: 0 auto;
            text-align: center;
            box-shadow: 0px 0px 2px 2px #e2dddd;
        }
        [class^='linkBox']{
            display: inline-block;
            width: 12%;
        }
        .amountBox{
            box-shadow: 0px 0px 0.5px 0.5px #c8bebe;
            padding: 3% 3% 3% 3%;
        }

        
    </style>
</head>
<body style="background-color: #f6f1f1;">
    <div id="app">
        <div class="mi-header" style="background-color: white;">
            <div class="mi-title">
                <div class="mi-logo">
                    <img src="/img/Login/Login.jpg"  onclick="location.href=('Home.html')" width="60px" height="60px" />
                </div>
                我的购物车
            </div>
            <div class="mi-nav">
                <a class="mi-nav__item url">用户协议</a>
                <a class="mi-nav__item url">隐私政策</a>
                <a class="mi-nav__item url">帮助中心</a>
            </div>
        </div>
        <hr style="background-color: chocolate;height: 1px;"/>
        <div class="upperpage">
            <!--头部导航和Item列表-->
            <div class="pagedisplay">
                <div style="display: inline-block; width: 9%;margin-top: 1%;">
                    <input id="checkAll" @click="allCheck($event)" type="checkbox" style="width: 20px;height: 20px;"/>&nbsp;全选
                </div>
                <div style="display: inline-block; width: 12%;">
                    
                </div>
                <div style="display: inline-block;width: 27%; margin-bottom: 1.5%;">商品名称</div>
                <div class="linkBox">单价</div>
                <div class="linkBox">数量</div>
                <div class="linkBox">小计</div>
                <div class="linkBox">操作</div>
                 <hr style="height: 1px;"/>
            </div>
            <div id="item" >
                <div class="pagedisplay" v-for="(item,index) in cart" :key="item.id" style="height: 100px;" >
                    <div style="display: inline-block; width: 9%;line-height: 100px;">
                        <input type="checkbox" @click="getTotal($event,item.cartItem.amount,item.subtotal,item.cartItem.detailID)" style="width: 20px;height:20px" class="check"/>
                    </div>
                    <div style="display: inline-block; width: 12%;">
                        <img :src="item.cartItem.productPictureList.split(',')[0]" style="height: 90px;width: 90px;  margin-top: -54px; margin-left: -50px; position: absolute;"  />
                    </div>
                    <div style="display: inline-block;width: 27%;">
                        {{item.cartItem.proName}}&nbsp;{{item.desc}}
                    </div>
                    <div class="linkBox">{{item.price}}</div>
                    <div class="linkBox">
                        <span class="amountBox">
                            <a @click="loseAmount(item.cartItem.cartID)">-</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.cartItem.amount}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a @click="addAmount(item.cartItem.cartID)">+</a>
                        </span>
                    </div>
                    <div class="linkBox" style="color: #FF6700;">{{item.subtotal}}</div>
                    <div class="linkBox" ><a @click="del(item.cartItem.cartID)">x</a></div>
                </div>
            </div>
            
          
    
            <div class="pagedisplay" style="text-align: right;">
                <div style="display: inline-block;;">
                    继续购物
                </div>
                <div style="display: inline-block;width: 10%;" >
                    已选择 &nbsp; <span style="color: #FF6700;">{{sumAmount}}</span> &nbsp;件
                </div>
                <div style="display: inline-block;width: 65%; color:#FF6700;">
                    合计<span style="font-size: 25px;">{{total}}</span>元
                </div>
                <div style="display: inline-block; margin-left: 40px;">
                    <input type="button" value="去结算" @click="Payment" style="text-align: center;font-size: 20px;height: 50px;width: 156px;border-style:none;color: white;background-color: #FF6700;"/>
                </div>
            </div>
            
            <div class="footer" style="margin-top: 20px;height: 500px;">
                <iframe src="footer.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
            </div>
        </div> 
    </div>
    <script src="/js/userscommon.js"></script>
    <script>
        let vm=new Vue({
            el: "#app",
            data:{
                cart:[],
                account:0,
                total:0,
                sumAmount:0,
                sumTotal:0,
                count:0,
                productDetailID:[],
                OrderModel:{
                    orderID:0,
                    userAccount:0,
                    orderMode:"支付宝",
                    orderDate:'',
                    state:1,
                    productDetailIDList:[],
                    productDetailAmount:1,
                    productDetailPrice:0,
                }
            },
            created: function () {
                // 获取跳转页面的url数据
                //首页传送的指定商品id从而获取对应商品信息
                var url = window.location.href
                var path = url.split('?')[1]
                var field = new URLSearchParams('?'+path)
                var account = field.get('account')
                // var account = 1687331537
                this.account = account
                this.OrderModel.userAccount = account
                //传回id
                this.showCart(account)
            },
            methods: {
                showCart:function(uid){
                    axios.get('/cart/show',{ params: { userID : uid} }).then(function (resp) {
                        vm.cart=resp.data.data
                        for (var index = 0; index < vm.cart.length; index++) {
                            vm.sumTotal+=vm.cart[index].subtotal;
                            vm.count+=vm.cart[index].cartItem.amount;
                            vm.productDetailID.push(vm.cart[index].cartItem.detailID);
                        }
                    })
                },
                del:function(cid){
                    axios.get('/cart/del',{ params: { itemID : cid} }).then(function (resp) {
                        alert(resp.data.message)
                        location.reload()
                    })
                },
                getTotal:function(e,amount,price,detailID){
                    var target=e.target;
                    if(target.checked){
                        vm.total+=price;
                        vm.sumAmount+=amount;
                        vm.OrderModel.productDetailPrice += price;
                        vm.OrderModel.productDetailAmount+=amount;
                        vm.OrderModel.productDetailIDList.push(detailID);
                    }else{
                        vm.total-=price;
                        vm.sumAmount-=amount;
                        vm.OrderModel.productDetailPrice -= price;
                        vm.OrderModel.productDetailAmount-=amount;
                        var index = vm.OrderModel.productDetailIDList.indexOf(detailID);
                        if (index !== -1) {
                            vm.OrderModel.productDetailIDList.splice(index, 1);
                        }
                    }
                },
                allCheck:function(e){
                    var target=e.target;
                    if(target.checked){
                        vm.total=vm.sumTotal;
                        vm.sumAmount=vm.count;
                        vm.OrderModel.productDetailAmount=vm.count;
                        vm.OrderModel.productDetailPrice = vm.sumTotal;
                        vm.OrderModel.productDetailIDList = vm.productDetailID
                    }else{
                        vm.total=0;
                        vm.sumAmount=0;
                        vm.OrderModel.productDetailPrice = 0;
                        vm.OrderModel.productDetailAmount=0;
                        vm.OrderModel.productDetailIDList.splice(0, vm.OrderModel.productDetailIDList.length);
                        this.showCart(this.account)
                    }
                },
                addAmount:function(cartID){
                    axios.get('/cart/amount',{ params: { cartID : cartID, amount:1} }).then(function (resp) {
                        location.reload()
                    })
                },
                loseAmount:function(cartID){
                    axios.get('/cart/amount',{ params: { cartID : cartID, amount:-1} }).then(function (resp) {
                        location.reload()
                    })
                },
                Payment:function(){
                    vm.getDate();
                    const order=JSON.stringify(vm.OrderModel)
                    axios({
                        url:'/order/insert',
                        method:'POST',
                        config:{ Headers:{'Content-Type':'application/json'} },
                        data:order,
                    }).then(function (resp) {
                        if (true == resp.data.data) {
                            alert("订单创建成功")
                            window.location.href=
                                "ConfirmOrder.html?account="+vm.OrderModel.userAccount+"&orderID="+vm.OrderModel.orderID;
                        }else{
                            alert("订单创建失败")
                        }
                    })
                },
                getDate(){
                    let date = new Date();
                    let a  = parseInt(date.getTime() / 1000);
                    this.OrderModel.orderID = a;
                },
            }
        })
    </script>
    <script src="/js/cart.js"></script>
</body>
</html>